﻿@{
    Layout = null;
    var navId = ViewBag.navId;
}
@*导航*@
    <link href="~/Content/CommonCss/layer/skin/default/layer.css" rel="stylesheet" />

    <script src="~/Content/CommonCss/layer/layer.js"></script>

    <style>
        .padding
        {
            padding: 20px 20px 0 20px;
        }

        #form1 tr td
        {
            padding: 5px;
        }

        table td
        {
            border: 0px;
        }

        table
        {
            font-size: 12px;
            line-height: 35px;
        }

        .tdtxt
        {
            text-align: right;
            width: 100px;
        }

        .tdbox
        {
            text-align: left;
            width: 200px;
        }

        .pagebreak
        {
            page-break-after: always;
        }

        .jumbotron img
        {
            width: 100%;
            height: auto;
        }
        .NavAction{
            display:none;    
        }
        .NavAction:nth-child(1){
            display:block;
        }
    </style>



    <style>
        .module_icon_box
        {
            width: 504px;
            background: #FFF;
            border: 1px solid #ccc;
            border-radius: 5px;
            z-index: 999999999;
        }

        .icon_check_nav
        {
            position: relative;
            width: 98%;
            height: 45px;
            margin: 5px;
            background-color: #e4e5e5;
            border-radius: 4px 4px 0 0;
            -webkit-border-radius: 4px 0;
            -moz-border-radius: 4px 0;
            border-bottom: 1px solid #d4d4d4;
            z-index: 1;
        }

        .module_icon_box img
        {
            float: left;
            margin: 5px;
            width: 40px;
            height: 40px;
            background: #eee 4px no-repeat;
            background-size: 32px 32px;
            border-radius: 3px;
            padding: 5px;
        }

        img:hover
        {
            background-color: yellow;
        }

        #navList div
        {
            display: inline-block;
        }

        #ico
        {
            width: 60px;
            height: 60px;
        }
        .layui-layer.layui-layer-page.layer-anim {
            top: 200px !important;
            left: 0 !important;
        }
        /*webuploader*/
        #picker1>div:nth-child(2){
            display:none;
        }
        .webuploader-element-invisible{
            opacity:0;
        }
    </style>
<form id="navform">
    <div class="form-group RowAlgnTop">
        <input type="hidden" id="NavId" name="NavId" value="@navId" />
        <input type="hidden" id="ModuleId" name="ModuleId" />

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">名称:</div>

        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <input class="form-control" type="text" id="NavName" name="NavName" value="">
        </div>
    </div>
    <div class="form-group RowAlgnTop">

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">图标:</div>

        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <div style="width:80px; height:60px; line-height:60px;">
                <a class="mini-button" href="javascript:void(0)">
                    <span class="mini-button-text ">
                        <img id="ico" src="~/Content/CommonCss/miniui/themes/icons/cc/1.png" />
                        <input type="hidden" name="Ico" id="Ico" value="/Content/CommonCss/miniui/themes/icons/cc/1.png" />
                    </span>
                </a>
            </div>
            <label class="btn btn-primary margin-top-10" id="picker1">上传自定义图标</label>
        </div>
    </div>
    <div class="form-group RowAlgnTop">

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">动作:</div>

        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 text-center">
            <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input type="radio" name="Action" value="0" style="display:block;margin:0 auto" />
                <span style="display: block; white-space: nowrap; ">连接</span>
            </label>
            @*<label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <input type="radio" name="Action" value="1" style="display:block;margin:0 auto" />
                        <span style="display:block;white-space:nowrap;">模块</span>
                    </label>
                    <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <input type="radio" name="Action" value="2" style="display:block;margin:0 auto" />
                        <span style="display:block;white-space:nowrap;">素材</span>
                    </label>*@

            <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input type="radio" name="Action" value="4" style="display:block;margin:0 auto" />
                <span style="display: block; white-space: nowrap; ">认证库</span>
            </label>
            <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input type="radio" name="Action" value="3" style="display:block;margin:0 auto" />
                <span style="display: block; white-space: nowrap; ">流程</span>
            </label>

        </div>
    </div>
    <div>
        <div class="form-group RowAlgnTop NavAction">

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">链接:</div>

            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <input class="form-control" type="text" id="LinkGoto" name="LinkGoto" value="">
            </div>
        </div>

        <div class="form-group RowAlgnTop NavAction">
            <div class="col-sm-offset-3 col-xs-8 col-sm-8 ">
                <button type="button" class=" btn btn-primary" onclick="$.MGJ.DiamondEdition.Dialog_EditAuthList()">修改认证库</button>
            </div>
        </div>
        @*<div class="form-group RowAlgnTop NavAction">

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">页面定位:</div>

            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <input class="form-control" type="text" id="PageGoto" name="PageGoto" value="" onclick="$.MGJ.DiamondEdition.Dialog_SelectModuleList()">
            </div>
        </div>
        <div class="form-group RowAlgnTop NavAction">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">素材:</div>

            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <input class="form-control" type="text" id="MaterialGoto" name="MaterialGoto" value="" onclick="$.MGJ.DiamondEdition.Dialog_SelectMaterialList()">
            </div>
        </div>*@



    </div>
    <div id="icobox" class="module_icon_box dno" style="display:none;top:0;left:0">

        <div class="block_icon1 block_check" style="display: block;">
            <img src="~/Content/webImgs/TraceSource/Ico/1.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/2.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/3.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/4.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/5.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/6.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/7.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/8.png" />

            <img src="~/Content/webImgs/TraceSource/Ico/rztb_01.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/rztb_02.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/rztb_03.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/rztb_04.png" />

            <img src="~/Content/webImgs/TraceSource/Ico/ds_jd.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/ds_tmall.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/ds_tmallsc.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/ds_yhd.png" />

            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_nyhfxq.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_qcjk.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_qycj.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_sclc.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_zjbg.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_zzlc.png" />
        </div>

        <div class="cl">
        </div>
    </div>
    <input type="hidden" id="AuthId" name="AuthId" />
</form>

<script>
    $("input[name='Action']").on("click", function () {
        var index = $("input[name='Action']").index($(this));

        if (index == 1) {

            $.MGJ.DiamondEdition.Dialog_SelectAuthList();

        }

        //index == 2 ? $(".NavAction").hide() : $(".NavAction").eq(index).show().siblings().hide();
        //$("input[name='Action']").removeAttr("id");
        //$("input[name='Action']")[index].id = 'Action';
        index <=  1  ? $(".NavAction").eq(index).show().siblings().hide() : $(".NavAction").hide()
    })
</script>



<script>

    var navId = $("#NavId").val();
    var moduleId = moduleEntity.ModuleId;

    $("#ModuleId").val(moduleId);

    (function () {
        var _this = $.MGJ.DiamondEdition;
        $.extend($.MGJ.DiamondEdition, {

            Ajax_NavSave: function () {
                var data = $("#navform").serialize();
                
                $.L.ajaxHandle({
                    url: ACTION_URL("NavSave", "OriginsMaterial"),
                    data: data,
                    success: function (ht) {
                        
                        if (ht.result > 0) {
                            if (ht.type == "add") {
                                append_Nav(ht.navEntity);
                            }
                            if (ht.type == "edit") {
                                ///刷新导航列表
                                setNavList(moduleEntity.ModuleId, "default");
                            }
                        } else {
                            $.L.msgError(ht.result);
                        }
                    }
                });

            },

            Ajax_BindingModel: function (navId) {

                $.L.ajaxHandle({
                    url: ACTION_URL("GetNavModel", "OriginsMaterial"),
                    data: {id:navId},
                    success: function (result) {
                        
                        var data = result;
                        $("#NavId").val(data.NavId);
                        $("#ModuleId").val(data.ModuleId);
                        $("#NavName").val(data.NavName)
                        $("#Ico").val(data.Ico);
                        $("#ico").attr("src", data.Ico);
                        $("input[type='radio'][name='Action'][value='" + data.Action + "']").prop("checked", true);
                        $("#LinkGoto").val(data.LinkGoto);
                        $("#MaterialGoto").val(data.MaterialGoto);
                        $("#PageGoto").val(data.PageGoto);

                        var list = $(".NavAction");

                        $.each(list, function (item) {
                            if (item == 0) {
                                if (item == data.Action) {
                                    $(list[item]).show();
                                } else {
                                    $(list[item]).hide();
                                }
                            } else {
                                $(list[item]).hide();
                            }
                           
                        })

                    }
                });
            },
        });
    })(jQuery)



    function append_Nav(navEntity) {
        
        var html = "";
        html = ['<tr  id="' + navEntity.NavId + '"  >',
            '<td class="tdtxt">',
             ' <div   class="m-ico-edit" >',
             '                <img  src=' + navEntity.Ico + ' />',
             '               <p class="f-di" >' + navEntity.NavName + '</p>',
             '</div> ',
            '</td>',
            '<td>',

     '      <div>',
     '           <a name="navedit"' + ' data-navid=' + navEntity.NavId + ' onclick="$.MGJ.DiamondEdition.Dialog_NavEdit(this)" role="button">',
     '               <img src="Content/webImgs/TraceSource/Ico/btn_edit.png" />',

     '           </a>',
         '       <a  name="navdel" data-id=' + navEntity.NavId + ' onclick=(navdel(this)) role="button">',
     '                <img src="Content/webImgs/TraceSource/Ico/btn_delete.png" />',
     '           </a>',
     '       </div>',

     '      </td>',
     '       </tr>'].join("");
        rebackNavHtml(html,0);
    }



    $("#ico").click(function () {
        layer.open({
            type: 1,
            shade: false,
            title: false, //不显示标题
            shadeClose: true, //点击遮罩关闭层
            area: ['auto', 'auto'],
            content: $('#icobox'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    });

    $("#icobox img").on("click", function (e) {
        var src = e.currentTarget.attributes["0"].nodeValue;
        $("#ico").attr("src", src);
        $("#Ico").val(src);
        layer.closeAll();
    });



    $(function () {

        var uploader1 = WebUploader.create({
            // swf文件路径
            //swf: BASE_URL + '/js/Uploader.swf',
            // 文件接收服务端。
            server: 'OriginsMaterial/Upload',
            // 选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#picker1',
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });



        function LoadItem_NavEdit(item, selector) {

            item.on('fileQueued', function (file) {

                item.upload();
            });


            item.on('uploadSuccess', function (file, r) {

                var result = r._raw.split("。")[1];
                $("#ico").attr("src", result);
                $("#Ico").val(result);


            });

            item.on('uploadError', function (file) {

                $.L.msgError("上传出错");
            });


        }


        LoadItem_NavEdit(uploader1, "#picker1");


    });


    $(document).ready(function () {
        
        if (navId!=0) {
            $.MGJ.DiamondEdition.Ajax_BindingModel(navId);
        }
    });

</script>
